<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ聊天窗口</title>
	<style type="text/css">
		*{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}
		.mid{
			width: 750px;
			height: 500px;
			margin: 0 auto;
			margin-top: 100px;
			background-color: gray;
		}
		.contact_list{
			width: 190px;
			height: 500px;
			background-color: #D7D7D7;
			float: left;
		}

		.contact{
			width: 190px;
			height: 50px;
			line-height: 50px;
			text-align: left;
		}
		.contact:hover{
			background-color: #fff;
			
		}
		.avatar{
			width: 40px;
			height: 40px;
			border: 0px;
			border-radius: 50%;
			background-color: #F5F5F5;
			float: left;
			margin-top: 5px;
			margin-left: 5px;
			margin-right: 5px;
		}
		.contact span{
			height: 30px;
			font-size: 16px;
			float: left;
		}
		.chatWindow{
			width: 560px;
			height: 500px;
			position: relative;
			float: right;
		}
		.contactName{
			width: 560px;
			height: 60px;
			background-color: #EAE9E9;
			padding-top: 10px;
		}
		.chatRecord{
			width: 560px;
			height: 300px;
			background-color: #DFDFE0;
		}
		.dialogBox{
			width: 560px;
			height: 130px;
			background-color:#C7C7C8 ;
		}
		.chatWindow .contactName .contact{
			/*margin-top: 10px;*/
		}

	</style>
</head>
<body>
	<div class="mid">
		<ul class="contact_list">
			<li class="contact"><div class="avatar"></div><span>林心如</span></li>
			<li class="contact"><div class="avatar"></div><span>林心如</span></li>
			<li class="contact"><div class="avatar"></div><span>林心如</span></li>
		</ul>
		<div class="chatWindow">
			<div class="contactName">
				<div class="contact"><div class="avatar"></div><span>林心如</span></div>
			</div>
			<div class="chatRecord">
				
			</div>
			<div class="dialogBox">
				
			</div>
		</div>
	</div>
</body>
</html>